<template>
  <div class="banner">
    <div @click="showSwiper">
      <div class="banner-img">
        <img src="/api/img/17.jpg" alt="" />
      </div>
      <div class="banner-title">
        金海湖风景区（AAAA景区）
      </div>
    </div>

    <div class="img-swiper"
     v-show="imgSwiper"
     @click="hideSwiper"
     >
      <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="item in bannerList" :key="item.id">
        <img :src="item.imgUrl" />
      </swiper-slide>

      <!-- Optional controls -->
      
    </swiper>
    <div class="swiper-pagination" slot="pagination"></div>
      <!-- <img src="/api/img/18.jpg" alt="" /> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
       swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          type:'fraction'
        },
      },
      bannerList:[
        {
          id:'01',
          imgUrl:'/api/img/18.jpg',
        },
        {
          id:'02',
          imgUrl:'/api/img/12.jpg',
        },
        {
          id:'03',
          imgUrl:'/api/img/16.jpg',
        },
        {
          id:'04',
          imgUrl:'/api/img/13.jpg',
        },
        {
          id:'05',
          imgUrl:'/api/img/14.jpg',
        },
        {
          id:'06',
          imgUrl:'/api/img/15.jpg',
        },
      ],
      imgSwiper: false
    };
  },
  methods:{
    showSwiper(){
       this.imgSwiper=true
    },
    hideSwiper(){
      this.imgSwiper=false
    }
  }
};
</script>

<style scoped>
.banner {
  position: relative;
}
.banner-img {
  width: 100%;
  overflow: hidden;
  height: 0;
  padding-bottom: 55%;
}
.banner-img img {
  width: 100%;
}
.banner-title {
  position: absolute;
  bottom: 0.3rem;
  left: 0.3rem;
  font-size: 0.36rem;
  color: #fff;
}
.img-swiper {
  background: #010101;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-swiper img {
  width: 100%;
  height: 250px;
}
.swiper-pagination{
  color: rgb(250, 250, 250);
  bottom: .8rem;
  font-size: .24rem;
}
</style>
